<template>
  <div class="w-full h-32 pl-10 pr-10">
    <CollapseContainer class="mt-5 w-200" title="效果展示">
      <p>local 图标池: <IconPicker width="20rem" mode="local" icon-align="left"/></p>
      <p>online iconify图标池: <IconPicker width="20rem" mode="iconify" /></p>
      <p>每页图标数: <IconPicker width="20rem" :pageSize="35" /></p>
      <p>svg图标池: <IconPicker width="20rem" mode="svg" /></p>
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="使用说明">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <!-- 源码 -->
    <CollapseContainer class="mt-5" title="源码">
      <markdown-viewer :value="getSource()" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
import { CollapseContainer } from '@/components/Container';
import { MarkdownViewer } from '@/components/Markdown';

import { IconPicker } from '@/components/Icon';
</script>

<script lang="ts">
function getDoc() {
  return `

## IconPicker
* IconPicker 是 vben 封装的一个图标选择组件
* 官网: * <a href="https://doc.vvbin.cn/components/icon.html#iconpicker" target="_blank">vben IconPicker 官方文档</a>

## 常用属性

| 属性 | 类型 | 默认值 | 说明 | 示例 |
| :--- | :--- |  :--- |  :--- | :--- |
| width | string | 100% | 组件宽度  | width="80"  |
| pageSize | number | 140 | 每页图标数 | pageSize="100" |
| mode | string | iconify|svg | 图标池 | 为svg时, 图标池尾 src/assets/icons 所有svg图标，仅可包含一级子目录 |

  `;
}

function getSource() {
  return `

\`\`\`html
\<template\>
  <p>iconify 图标池: <IconPicker width="20rem" /></p>
  <p>默认每页图标数: <IconPicker width="20rem" :pageSize="35" /></p>
  <p>svg 图标池: <IconPicker width="20rem" mode="svg" /></p>
\</template\>

\<script lang="ts" setup\>

  import { IconPicker } from '@/components/Icon';
}
\</script\>
\`\`\`
`;
}
</script>
